import './app.scss'
import {useState} from "react";
import {ReactVisualEditor} from "./packages/ReactVisualEditor";
import {visualConfig} from "./visual.config";
import editData from './edit.data.json'
import {ReactVisualEditorValue} from "./packages/ReactVisualEditor.utils";
import {notification} from "antd";

export default () => {

    /*const [pos, setPos] = useState({
        left: 0,
        top: 0,
    })

    const posRef = useRef(pos)
    posRef.current = pos

    const moveDraggier = (() => {

        const dragData = useRef({
            startTop: 0,                        // 拖拽开始的时候，block的top值
            startLeft: 0,                       // 拖拽开始的时候，block的left值
            startX: 0,                          // 拖拽开始的时候，鼠标的left值
            startY: 0,                          // 拖拽开始的时候，鼠标的top值
        })

        const mousedown = useCallbackRef((e: React.MouseEvent<HTMLDivElement>) => {
            document.addEventListener('mousemove', mousemove)
            document.addEventListener('mouseup', mouseup)
            dragData.current = {
                startTop: pos.top,
                startLeft: pos.left,
                startX: e.clientX,
                startY: e.clientY,
            }
        })
        const mousemove = useCallbackRef((e: MouseEvent) => {
            /!*在move的过程中，需要获取一些hook变量*!/
            console.log({
                pos: `${pos.top}_${pos.left}`,
                ref: `${posRef.current.top}_${posRef.current.left}`,
            })

            const {startX, startY, startLeft, startTop} = dragData.current
            const durX = e.clientX - startX
            const durY = e.clientY - startY
            setPos({
                top: startTop + durY,
                left: startLeft + durX
            })
        })
        const mouseup = useCallbackRef((e: MouseEvent) => {
            document.removeEventListener('mousemove', mousemove)
            document.removeEventListener('mouseup', mouseup)
        })

        return {
            mousedown,
        }
    })();*/

    const [editorValue, setEditorValue] = useState(editData as ReactVisualEditorValue)
    const [formData, onFormDataChange] = useState({
        username: 'admin000',
        minLevel: 100,
        maxLevel: 200,
    } as any)

    const customProps = {
        inputComponent: {
            onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
                console.log(e)
            }
        },
        buttonComponent: {
            onClick: () => {
                notification.open({
                    message: '执行提交逻辑，校验表单数据',
                    description: JSON.stringify(formData)
                })
            }
        }
    }

    return (
        <div className="app-home">
            {/*<div
                style={{
                    height: '50px',
                    width: '50px',
                    backgroundColor: 'black',
                    position: 'relative',
                    top: `${pos.top}px`,
                    left: `${pos.left}px`,
                    display: 'inline-block',
                }}
                onMouseDown={moveDraggier.mousedown}
            />*/}
            <ReactVisualEditor config={visualConfig}
                               value={editorValue}
                               onChange={setEditorValue}
                               formData={formData}
                               onFormDataChange={onFormDataChange}
                               customProps={customProps}
            >
                {{
                    buttonComponent: formData.username.length > 5 ? undefined : () => <button disabled>普通按钮</button>
                }}
            </ReactVisualEditor>
        </div>
    )
}